<template>
  <div>
    <div>
      <el-row class="">
        <el-col :span="22">换货配件列表</el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            @click="checkReturnInfo('选择换料配件')"
            v-if="permission(getConfig.authority.returnMaterial)"
          >选择配件</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <template #allNum>
            <div class="tabelAomut">
              <div>
                换货配件总金额：<span>￥{{ projectSum }}</span>
              </div>
              <div>
                配件数：<span>{{ partsNum }}</span>
              </div>
            </div>
          </template>
        </data-table>
      </el-row>
    </div>

    <div style="margin-top: 40px">
      <el-row class="">
        <el-col :span="22">换货精品列表</el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            @click="checkReturnInfo('选择换料精品')"
            v-if="permission(getConfig.authority.returnMaterial)"
          >选择精品</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableDataBoutique"
          :total-count="jpTotalCount"
          :table-column-attributes="tableColumnAttributesBoutique"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <template #allNum>
            <div class="tabelAomut">
              <div>
                精品总金额：<span>￥{{ jpTotalAmount }}</span>
              </div>
              <div>
                精品优惠金额：<span>￥{{ jpTotalAmount-jpDiscountAmount }}</span>
              </div>
              <div>
                精品折后总金额：<span>{{ jpDiscountAmount }}</span>
              </div>
            </div>
          </template>
        </data-table>
      </el-row>
    </div>

    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :width="'1000px'"
      :append-to-body="true"
      @close="dialogClose"
    >
      <ChangeFitting
        v-if="dialogTitle == '选择换料配件'"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
        @dialogClose="dialogClose"
      />

      <ChangeBoutique
        v-if="dialogTitle == '选择换料精品'"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
        @dialogClose="dialogClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import ChangeFitting from './components/ChangeFitting'
import ChangeBoutique from './components/ChangeBoutique'
import { permission } from '@/utils/index';

export default {
  components: { ChangeFitting, ChangeBoutique },
  props: ['workOrderId', 'workOrderType', "getConfig"], // workOrderType 工单类型 1快速单
  mixins: [
    baseMixin({
      // findData: rapidPartsPage,
      dataName: ['content', 'totalRecords'],
      idName: 'id',
    }),
  ], computed: {
    //优惠金额
    partsNum () {
      let sum = 0
      this.tableData.forEach((element) => {
        sum += Number(element.num ? element.num : 0)
      })
      return sum
    },
    projectSum () {
      let sum = 0
      this.tableData.forEach((element) => {
        sum += Number(element.amount)
      })
      return sum
    },
    //精品总金额
    jpTotalAmount () {
      let sum = 0
      this.tableDataBoutique.forEach((element) => {
        sum += Number(element.amount)
      })
      return sum
    },
    //精品折扣金额
    jpDiscountAmount () {
      let sum = 0
      this.tableDataBoutique.forEach((element) => {
        sum += Number(element.shouldAmount)
      })
      return sum
    }
  },
  data () {
    return {
      searchOptions: {
        likeName: '', //配件编号
        partsType: '', //配件类比
        // rapidId: this.workOrderId, //快速单id
        returnParts: 0, //是否查退货配件null 不查，0 查
        status: '',
      },
      searchJpOptions: {
        jpsType: 3 //已换
      },
      jpTotalCount: 0,
      visible: false,
      dialogTitle: '选择退料配件',
      dict: [],
      tableColumnAttributes: [
        { name: '配件编号', value: 'partsCode', type: 'text' },
        { name: '配件名称', value: 'partsName', type: 'text' },
        { name: '配件类别', value: 'partsType', type: 'text' },
        { name: '配件单位', value: 'partsUnit', type: 'text' },
        { name: '退货数量', value: 'num', type: 'text' },
        { name: '退货单价', value: 'storagePrice', type: 'text' },
        { name: '总金额', value: 'amount', type: 'text' },
      ],
      rules: [],
      tableDataBoutique: [],
      tableColumnAttributesBoutique: [
        { name: '精品编号', value: 'orderNo', type: 'text' },
        { name: '精品名称', value: 'name', type: 'text' },
        { name: '一级类别', value: 'appLargeIdOneValue', type: 'text' },
        { name: '二级类别', value: 'appLargeIdTwoValue', type: 'text' },
        { name: '供应商', value: 'supplierName', type: 'text' },
        { name: '销售价', value: 'currentPrice', type: 'text' },
        { name: '数量', value: 'num', type: 'text' },
        { name: '折扣', value: 'discount', type: 'text' },
        { name: '折后总价', value: 'shouldAmount', type: 'text', },
        { name: '收费类型', value: 'tollType', type: 'text'},
        { name: '备注', value: 'remark', type: 'text' },
      ],
    }
  },
  async created () {
    this.notQuery = false;
    this.searchOptions[`${this.$parent.getConfig.orderChangeFittingList.queryField}`] = this.workOrderId;
    this.searchJpOptions[`${this.$parent.getConfig.orderChangeBoutiqueList.queryField}`] = this.workOrderId;
    this.setTableData();
    this.setJpTableData();
  },
  methods: {
    permission,
    async setTableData () {
      if (!this.notQuery) {
        let fun = this.$parent.getConfig.orderChangeFittingList.query;
        if (fun) {
          let res = await fun(this.searchOptions, this.pageSize, this.currentPage);
          this.totalCount = parseInt(res.data['totalRecords'])
          this.tableData = res.data['content'];
        }
      }
    },

    async setJpTableData () {
      if (!this.notQuery) {
        let fun = this.$parent.getConfig.orderChangeBoutiqueList.query;
        if (fun) {
          let res = await fun(this.searchJpOptions, this.pageSize, this.currentPage);
          this.jpTotalCount = parseInt(res.data['totalRecords']);
          this.tableDataBoutique = res.data['content'];
        }
      }
    },

    checkFitting () {
      this.visible = true
    },
    checkReturnInfo (dialogTitle) {
      this.visible = true;
      this.dialogTitle = dialogTitle;
    },
    dialogClose () {
      this.visible = false
      this.setTableData();
    },
    changeType (item) {
      this.selectedTypeText = item.label
    },
  },
  mounted () { },
}
</script>
<style lang="scss" scoped>
</style>
